<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome-test</title>
    <script src="jquery-easyui-1.9.10/jquery.min.js"></script>
    <script src="jquery-easyui-1.9.10/jquery.easyui.min.js"></script>
    <link rel="stylesheet" href="jquery-easyui-1.9.10/themes/default/easyui.css">
    <link rel="stylesheet" href="jquery-easyui-1.9.10/themes/icon.css">
    <script src="jquery-easyui-1.9.10/locale/easyui-lang-zh_CN.js"></script>
    <script>
        $(function () {
            //查看效果失败，没有设置对应的css样式
            $(".drags").draggable({
                proxy: "clone",
            });

            $('#droppableID').droppable({
                //Determine which draggable element will be accepted
                accept: '#d1,#d3',
                onDragEnter: function (e, source) {
                    //
                    $(source).draggable("options").cursor = "pointer";
                    $(source).draggable("proxy").css("border", "1px solid red");
                }
            });
        });
    </script>
</head>
<body>

<!--draggable被拖动的元素-->
<div class="container">
    <div id="d1" class="drags">drag1</div>
    <div id="d2" class="drags">drag2</div>
    <div id="d3" class="drags">drag3</div>
</div>
<!--放置目标容器：盛放被拖动元素的容器-->
<div id="droppableID"></div>
</body>
</html>